<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>智能客服系统-测试平台</title>
		<script src="/socket.io/socket.io.js"></script>
		<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
		<style type="text/css">
			.messagelist {
				margin: 20px auto;
				font-size: 14px;
				height: 400px;
				overflow-y: auto;
			}
		</style>
		<script>
			var socket = io.connect('http://10.96.129.24:8181/');
			//页面加载时候执行初始化
			window.onload = function() {
				//实例并初始化我们的SmartQQ程序
				var smartQQ = new SmartQQ();
				smartQQ.init();
			};

			//定义应用类
			var SmartQQ = function() {};

			//向应用类添加业务方法
			SmartQQ.prototype = {
				init: function() { //初始化方法

					socket.on('init', function(data) {
						//console.log(data);

						socket.emit('connection_result', {
							result: '已有客户端连接服务器'
						});

						$("#test").html(data.hello);

					});
				}
			}

			//新建个打印页面输出方法
			//显示
			function appendLog(name, message) {
				if(typeof message == "undefined") return;
				var messagelist = document.getElementById('messagelist');

				var messageElem = document.createElement("div");
				var preface_label;
				//当类型为notification说明用户处于离开状态
				if(name === '客服机器人') {
					preface_label = "<span class=\"label label-info\">" + name + "</span>";
				} else {
					preface_label = "<span class=\"label label-success\">" +
						name + "</span>";
				}
				var message_text = "<h2>" + preface_label + "&nbsp;&nbsp;" +
					message + "</h2>";
				messageElem.innerHTML = message_text;

				messagelist.appendChild(messageElem);
				messagelist.scrollTop = messagelist.scrollHeight;

			}

			//发送消息
			function sendMessage() {
				var messageField = document.getElementById('message');
				if(messageField.value == '' || messageField.value == null) return;
				//将我发送的信息显示在页面
				appendLog('我', messageField.value);
				if(socket) {
					socket.emit('message', {
						msg: messageField.value
					});

					//接收信息 显示在页面
					//这里触发多次，为了限制多次触发，用计数器限制一下，这只是临时解决，最终还是要搞清楚这里为什么会多次触发
					var i = 1;
					socket.on('answer', function(data) {
						if(i == 0) return;
						appendLog(data.sysname, data.answer);
						i--;
					});
				}
				messageField.value = '';
				messageField.focus();
			}
		</script>
	</head>

	<body>
		<div id="test">

		</div>

		<div id="messagelist" class="messagelist">

		</div>

		<hr/>
		<form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
			<div class="form-group">
				<input class="form-control" type="text" id="message" name="message" placeholder="请在这里输入你要发送的消息" value="" autofocus/>
			</div>
			<button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">
                     发送消息
                </button>

		</form>

		<!-- 加载页面 -->
		<div class="loading">
			<div class="loading_center">
				<div class="loading_logo"></div>
				<p class="loading_stxt">客服通信中 ...</p>
				<div class="loading_sbar"></div>
			</div>
		</div>
		<!-- 桌面 -->
		<!--<div class="disktop">
			<div class="disktop_bg"><img _src="images/blue_glow.jpg" /></div>
			<div class="left_bar" style="top:200px; display:block;">
				<div class="dock_container dock_pos_left">
					<div class="dock_middle">
						<div class="dock_item_list">
							<div class="app_button app_button_qq">
								<div class="app_icon ">
									<img class="app_icon_img" src="images/big2.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>-->

	</body>

</html>